<template>
  <div class="app-containers">
<!--    <div class="topping_box">-->
<!--      <svg t="1715405853620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
<!--           p-id="2625" width="50" height="50">-->
<!--        <path-->

<!--          fill="#575B66" p-id="2626"></path>-->
<!--      </svg>-->
<!--      审批-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--      通知-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--      任务-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--      项目-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--      合同-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--    </div>-->
<!--    <div class="topping_box">-->
<!--    </div>-->
    <div class="cotainer_box2">
      <div class="cotainer_VIP">
        <span>快捷申请</span>
      </div>
      <div class="cotainer_box2_box">
        <ul>
          <li>
            <a href="work/todo" class="icon-link">
              <i class="el-icon-shopping-cart-full icon"></i>
              <p>代办任务</p>
            </a>
          </li>
          <li>
            <a href="work/finished" class="icon-link">
              <i class="el-icon-receiving icon"></i>
              <p>已办任务</p>
            </a>
          </li>
          <li>
            <a href="" class="icon-link">
              <i class="el-icon-folder-opened icon"></i>
              <p>暂缓开通</p>
            </a>
          </li>
          <li>
            <a href="everyWork/dailyImprovement" class="icon-link">
              <i class="el-icon-reading icon"></i>
              <p>日精进打卡</p>
            </a>
          </li>
          <li>
            <a href="everyWork/manHourForm" class="icon-link">
              <i class="el-icon-user-solid icon"></i>
              <p>工时填报</p>
            </a>
          </li>
          <li>
            <a href="everyWork/workScheduleList" class="icon-link">
              <i class="el-icon-sunrise-1 icon"></i>
              <p>每日工作</p>
            </a>
          </li>
          <li>
            <a href="everyWork/leaveApplyForm" class="icon-link">
              <i class="el-icon-s-order icon"></i>
              <p>请假申请</p>
            </a>
          </li>
          <li>
            <a href="everyWork/applyWorkForm" class="icon-link">
              <i class="el-icon-s-cooperation icon"></i>
              <p>加班申请</p>
            </a>
          </li>
          <li>
            <a href="everyWork/notice" class="icon-link">
              <div class="icon-container">
              <i class="el-icon-message-solid icon"></i>
                <a class="notification">{{ noticeQuantity }}</a>
              </div>
              <p>消息通知</p>
            </a>
          </li>

        </ul>
      </div>
    </div>
    <div class="cotainer_box1">
<!--      <div class="cotainer_VIP">-->
<!--        <span>日历</span>-->
<!--      </div>-->
<!--      <el-calendar v-model="value" class="scaled">-->
<!--      </el-calendar>-->
      <div id="container" style="height: 100%"></div>
    </div>

    <div class="cotainer_initmsn">
      <div class="cotainer_VIP">
        <span>公司公告</span>
      </div>
      <template>
        <el-table
          :data="noticeList"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="公告标题:">
                  <span>{{ props.row.noticeTitle }}</span>
                </el-form-item>
                <el-form-item label="公告类型:">
                  <span>{{ props.row.noticeType == 1? '通知' : '公告'}}</span>
                </el-form-item>
                <el-form-item label="公告内容:">
                  <span>{{ props.row.noticeContent }}</span>
                </el-form-item>
                <el-form-item label="通知时间:">
                  <span>{{ parseTime(props.row.createTime, '{y}-{m}-{d}') }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="公告标题"
            prop="noticeTitle">
          </el-table-column>
          <el-table-column
            label="公告类型"
            prop="noticeType" width="100">
            <template slot-scope="scope">
              <el-tag
                :type=getNoticeTypeColor(scope.row.noticeType)
              >
              <span >{{ scope.row.noticeType == 1? '通知' : '公告' }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="公告内容"
            prop="noticeContent">
            <template slot-scope="scope">
              <div class="ellipsis" >{{ scope.row.noticeContent }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="通知时间"
            prop="createTime" width="130">
            <template slot-scope="scope">
              <span >{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="cotainer_initmsn_plus" >
      <div class="cotainer_VIP">
        <span>消息动态</span>
      </div>
      <div class="more_button">
        <a @click.prevent="handleLinkDynamicClick()" style="color: #2828ef">更多</a>
      </div>
      <el-timeline style="margin-top: 20px;">
        <el-timeline-item
          @click.native="activitiesClick"
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.timestamp">
          {{activity.content}}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="cotainer_initmsn_quest" >
      <div class="cotainer_VIP">
        <span>任务通知</span>
      </div>
      <el-table v-loading="initmsnLoading" :data="initmsnList" style="width: 100%; height: calc(100% - 40px);">
        <el-table-column prop="projectName" label="项目名称">
          <template slot-scope="scope">
            <a @click.prevent="handleLinkClick(scope.row)" style="color: #409eff">
              <div :class="{ 'focused': scope.isFocused }"
                   @focus="handleFocus(scope)"
                   @blur="handleBlur(scope)">
                {{ scope.row.projectName }}
              </div>
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="missionTheme" label="任务名称" >
          <template slot-scope="scope">
            <el-tag
              :type=getMissionThemeColor(scope.row.stateType)
            >
              {{ scope.row.missionTheme }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.status }}
              <el-tag
                :type=getPriorityColor(scope.row.priority)
              >
                {{ scope.row.priority }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="planEndTime" label="截至日期" width="140">
          <template slot-scope="scope">
            <span >{{ parseTime(scope.row.planEndTime, '{y}-{m}-{d}') }}
            <el-tag
              :type=getViewStatusColor(scope.row.viewStatus)
            >
                {{ scope.row.viewStatus }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    <div class="cotainer_initmsn" >-->
<!--      <div class="cotainer_VIP">-->
<!--        <span>任务通知</span>-->
<!--      </div>-->
<!--      <el-table v-loading="projectLoading" :data="porjectList" style="width: 100%; height: calc(100% - 40px);">-->
<!--        <el-table-column prop="projectName" label="项目名称">-->
<!--          <template slot-scope="scope">-->
<!--            <a @click.prevent="handleLinkClick(scope.row)" style="color: #409eff">-->
<!--              <div :class="{ 'focused': scope.isFocused }"-->
<!--                   @focus="handleFocus(scope)"-->
<!--                   @blur="handleBlur(scope)">-->
<!--                {{ scope.row.projectName }}-->
<!--              </div>-->
<!--            </a>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="missionTheme" label="任务名称" >-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="status" label="状态" width="100">-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="planEndTime" label="截至日期" width="140">-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </div>-->

    <workDay
      ref="workDay"
      :workOpen="workOpen"
      :id ="workDayId"
      @cancel="workOpen = false">
    </workDay>
  </div>
</template>

<script>
import {listInitmsnByName,updateViewStatusById} from "@/api/system/mis/initmsn";
import {listNotice} from "@/api/system/notice";
import workDay from "@/components/workDayDialog/index";
import {getAnalyShare} from "@/api/system/mis/share";
import {listMiddle} from "@/api/system/notice/middle";
import {getAnnualTargetCondition} from "@/api/system/mis/yearsBudget";
import * as echarts from "echarts";
import {listMessageCreationRecord} from "@/api/system/mis/messageCreationRecord";

export default {
  components: {
    workDay
  },

  name: "Index",
  data() {
    return {
      value: new Date(),
      workOpen: false,
      isCopy: true,
      workDayId: '',
      noticeQuantity: 0,
      initmsnList: [],
      porjectList: [],
      activities: [],
      initmsnLoading: false,
      projectLoading: false,
      noticeList:[],
    };
  },
  created() {
    this.getList();

    setInterval(() => {
      // 在这里执行定时任务的逻辑
      if (this.isCopy == true) {
        this.copyContent()
      }
    }, 1000);
  },
  methods: {
    handleFocus(scope) {
      scope.isFocused = true;
    },
    handleBlur(scope) {
      scope.isFocused = false;
    },
    /** 查询首页数据 */
    getList() {
      // 查询项目任务关系列表
      const queryParams = {
        name: this.$store.state.user.name
      }
      this.initmsnLoading = true
      listInitmsnByName(queryParams).then(response => {
        this.initmsnList = response;
        this.getProceedDay(this.initmsnList)
        this.initmsnLoading = false
      });
      // 查询公告列表
      const noticeQueryParams = {
        status: "0"
      }
      listNotice(noticeQueryParams).then(response => {
        this.noticeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // 获取通知未读条数
      const noticeParams = {
        recipientName: this.$store.state.user.nikename,
        viewStatus: "未读"
      }
      listMiddle(noticeParams).then(response => {
        this.noticeQuantity = response.rows.length
      })
      // 查询年度目标详情
      const goalParams = {
        year: new Date().getFullYear(),
      }
      getAnnualTargetCondition(goalParams).then(response => {
        this.initChart(response)
      })
      // 查询年度目标详情
      const messageCreationRecordParams = {
        pageNum: 1,
        pageSize: 10,
      }
      listMessageCreationRecord(messageCreationRecordParams).then(response => {
        response.rows.forEach(res =>{
          this.activities.push({
            content: res.description,
            timestamp: res.createTime,
            color: '#0bbd87'
          })
        })
      });
    },
    activitiesClick(row){
      console.log(row)
    },
    initChart(data) {
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['年度目标', '年度预算', '营销阶段', '合同额', '收款金额'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        label: {
          show: true,
          position: 'top'
        },
        series: [
          {
            name: '金额：',
            type: 'bar',
            barWidth: '60%',
            data: [100000000, data.budgetMoney, data.marketingMoney, data.contractMoney, data.collectionMoney],
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
        myChart.on('click', (params) => {
          if (params.name == '年度预算'){
            this.$router.push({
              path: "/sell/yearsBudgetList",
              query: { years: new Date().getFullYear()},
            });
          } else if (params.name == '营销阶段'){
            this.$router.push({
              path: "/sell/marketingStage",
              query: { years: new Date().getFullYear()},
            });
          }else if (params.name == '合同额'){
            this.$router.push({
              path: "/business/contractList",
              query: { years: new Date().getFullYear()},
            });
          }else if (params.name == '收款金额'){
            this.$router.push({
              path: "/finance/collectionFill",
              query: { years: new Date().getFullYear()},
            });
          }
        })
      }
      window.addEventListener('resize', myChart.resize);
    },
    // 解析复制内容
    async copyContent(){
      let text = await navigator.clipboard.readText();
      // 判断是否是复制的MIS内容
      if (!text.includes("MIS")) {
        return
      }
      const queryParams = {
        text: text
      }
      getAnalyShare(queryParams).then(response => {
        if (response.code == 200) {
          // 判断复制内容来源
          if (response.type == 'workDay') {
            this.isCopy = false
            this.workOpen = true
            this.workDayId = response.data.id
          }
        }
      })
    },
    // 获取进度
    getProceedDay(row){
      for (let i = 0; i < row.length; i++) {
        // 创建时间
        const createTime = new Date(row[i].createTime);
        // 计划完成时间
        const planEndTime = new Date(row[i].planEndTime);
        // 当前时间
        const currentDate = new Date();
        // 判断当前时间是否大于计划完成时间
        if (currentDate >planEndTime){
          this.initmsnList[i].stateType = '3'
          // 判断当前时间是否小于计划完成时间
        }else if (currentDate < planEndTime) {
          // 将两个时间转换为毫秒数
          const diffInMs = planEndTime.getTime() - createTime.getTime();
          // 将毫秒数转换为天数 得到创建时间到完成时间天数
          const timeDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
          // 将两个时间转换为毫秒数
          const timeDiffInMs = currentDate.getTime() - createTime.getTime();
          // 将毫秒数转换为天数 得到创建时间到当前时间天数
          const timeDiffInDays = Math.floor(timeDiffInMs / (1000 * 60 * 60 * 24));
          if (timeDiffInDays <  Math.floor(timeDays / 3)){
            this.initmsnList[i].stateType = '1'
          }else if (timeDiffInDays < timeDays*0.66){
            this.initmsnList[i].stateType = '2'
          }else {
            this.initmsnList[i].stateType = '3'
          }
        }else {
          this.initmsnList[i].stateType = '3'
        }
      }
    },
    //
    handleLinkDynamicClick(){
      this.$router.push({
        path: "/everyWork/messageCreationRecord",
        query: {},
      });
    },
    // 任务通知中项目名称点击事件
    handleLinkClick(row){
      let projectId = row.projectId
      let task = {
        id:row.id
      }
      if (row.viewStatus == '未读'){
        updateViewStatusById(row.id).then(response => {
          this.getList();
        });
      }
      this.$router.push({
        path: "/project/proInitForm",
        query: { type: 'index',projectId: projectId,task:task},
      });
    },
    getPriorityColor(priority) {
      switch (priority) {
        case '低':
          return 'success';
        case '中':
          return 'default';
        case '高':
          return 'warning';
        case '紧急':
          return 'danger';
        default:
          return '';
      }
    },
    getViewStatusColor(priority) {
      switch (priority) {
        case '已读':
          return 'success';
        case '未读':
          return 'default';
        default:
          return '';
      }
    },
    getMissionThemeColor(row) {
      switch (row) {
        case '1':
          return '';
        case '2':
          return 'warning';
        case '3':
          return 'danger';
        default:
          return '';
      }
    },
    getNoticeTypeColor(row) {
      switch (row) {
        case '1':
          return 'warning';
        case '2':
          return 'success';
        default:
          return '';
      }
    },
  }
};
</script>

<style scoped lang="scss">
.calendar-container {
  width: 100%; /* 设置容器宽度为200px */
  height: 450px; /* 设置容器高度为400px */
  overflow: hidden; /* 隐藏容器外部溢出的内容 */
}

.scaled {
  width: 150%; /* 设置组件宽度为100% */
  transform: scale(0.66); /* 缩小为原始尺寸的60% */
  transform-origin: top left; /* 设置变换原点为左上角 */
}
.el-calendar,
.el-calendar * {
  font-size: 20px; /* 修改日历组件中所有文字的字体大小为20px */
}
.el-icon-arrow-right, .el-icon-arrow-left {
  font-size: 20px; /* 调整日历组件右侧箭头按钮的字体大小为20px */
}
.app-containers {
  background: #f4f6fa;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}
.topping_box {
  overflow: hidden;
  width: 10%;
  background-color: #ffffff;
  height: 95px;
  margin-top: 10px;
  margin-left: 10px;
}
.cotainer_box2 {
  overflow: hidden;
  width: 50%;
  background-color: #ffffff;
  height: 300px;
  margin-top: 10px;

  .cotainer_VIP {
    width: 95px;
    height: 30px;
    border: 2px solid #2259f0;
    border-radius: 7px;
    padding: 3px;
  }

  span {
    color: #ffffff;
    background: #2459f3;
    display: block;
    border-radius: 7px;
    width: 85px;
    font-size: 14px;
    text-align: center;
  }
}

.cotainer_box1 {
  overflow: hidden;
  width: 70%;
  background-color: #ffffff;
  height: 465px;
  margin-top: 10px;

  .cotainer_VIP {
    width: 95px;
    height: 30px;
    border: 2px solid #2259f0;
    border-radius: 7px;
    padding: 3px;

    span {
      color: #ffffff;
      background: #2459f3;
      display: block;
      border-radius: 7px;
      width: 85px;
      font-size: 14px;
      text-align: center;
    }
  }
}
.cotainer_initmsn {
  overflow: hidden;
  width: 49.7%;
  background-color: #ffffff;
  height: 310px;
  margin-top: 10px;

  .cotainer_VIP {
    width: 95px;
    height: 30px;
    border: 2px solid #2259f0;
    border-radius: 7px;
    padding: 3px;

    span {
      color: #ffffff;
      background: #2459f3;
      display: block;
      border-radius: 7px;
      width: 85px;
      font-size: 14px;
      text-align: center;
    }
  }
}
.cotainer_initmsn_quest {
  overflow: hidden;
  width: 49.7%;
  background-color: #ffffff;
  height: 310px;
  margin-top: -310px;

  .cotainer_VIP {
    width: 95px;
    height: 30px;
    border: 2px solid #2259f0;
    border-radius: 7px;
    padding: 3px;

    span {
      color: #ffffff;
      background: #2459f3;
      display: block;
      border-radius: 7px;
      width: 85px;
      font-size: 14px;
      text-align: center;
    }
  }
}

.cotainer_initmsn_plus {
  overflow: hidden;
  width: 49.7%;
  background-color: #ffffff;
  height: 630px;
  margin-top: 10px;

  .cotainer_VIP {
    width: 95px;
    height: 30px;
    border: 2px solid #2259f0;
    border-radius: 7px;
    padding: 3px;

    span {
      color: #ffffff;
      background: #2459f3;
      display: block;
      border-radius: 7px;
      width: 85px;
      font-size: 14px;
      text-align: center;
    }
  }
  .more_button {
    margin-right: 20px;
    float: right;
  }
}

.cotainer_box2 {
  width: 29.5%;
  //padding-top: 20%;
  background-color: #ffffff;
  margin-top: 10px;
  padding: 10px;
  height: 465px;
  .cotainer_box2_box1 {
    width: 100%;
    height: 400px;
    background: #f4f7ff;
    margin-top: 10px;
    border-radius: 15px;
  }
  .cotainer_box2_box{
    width: 100%;
    height: 400px;
    background: #f4f7ff;
    margin-top: 0px;
    border-radius: 15px;
    ul{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      list-style: none;
      padding: 5px;
      li{
        width: 32%;
        height:120px;
        background: #e0e8fb;
        margin-top: 7px;
        border-radius: 15px;
        text-align: center;
        i{
          height: 40px;margin-top: 20px;color: #4372ef;font-size: 45px;
        }
      }
    }
  }
}

.el-table {
  height: 100%;
}
.icon-link:hover .icon {
  transform: scale(1.5); /* 图标放大倍数 */
  transition: transform 0.3s ease; /* 过渡效果 */
  position: relative;
  display: inline-block;
}
.demo-table-expand {
  font-size: 5px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  transform: translateX(4rem);
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focused {
  color: blue; /* 设置焦点时的文本颜色为蓝色，你可以根据需要修改 */
}
.icon-container {
  position: relative;
  //display: inline-block;
}

.notification {
  position: absolute;
  top: 13px;
  right: 23px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 5px;
  font-size: 10px;
}
</style>
